<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户注册</title>
  <style>
      /* 全局样式 */
      body {
          font-family: Arial, sans-serif;
          margin: 0;
          padding: 0;
          background-color: #f4f4f4;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100vh;
      }

      /* 表单容器样式 */
      .register-container {
          background-color: white;
          padding: 2rem;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          width: 100%;
          max-width: 400px;
          text-align: center;
      }

      /* 标题样式 */
      h2 {
          margin-bottom: 1rem;
          color: #333;
      }

      /* 表单元素样式 */
      label {
          display: block;
          margin-bottom: 0.5rem;
          font-weight: bold;
          color: #555;
      }

      input[type="text"],
      input[type="password"],
      input[type="number"],
      select,
      input[type="email"] {
          width: 100%;
          padding: 0.75rem;
          margin-bottom: 1rem;
          border: 1px solid #ccc;
          border-radius: 4px;
          font-size: 1rem;
          box-sizing: border-box;
      }

      /* 按钮样式 */
      .button-container {
          margin-top: 1rem;
      }

      button {
          display: block;
          width: 100%;
          padding: 0.75rem;
          font-size: 1rem;
          color: white;
          background-color: #28a745;
          border: none;
          border-radius: 4px;
          cursor: pointer;
          transition: background-color 0.3s ease;
      }

      button:hover {
          background-color: #218838;
      }

      /* 响应式设计 */
      @media (max-width: 600px) {
          h2 {
              font-size: 1.5rem;
          }

          button {
              font-size: 0.9rem;
              padding: 0.6rem;
          }
      }
  </style>
</head>
<body>
  <div class="register-container">
    <h2>用户注册</h2>
    <form id="registerForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" maxlength="20" required>

        <label for="password">密码：</label>
        <input type="password" id="password" maxlength="20" required>

        <label for="gender">性别：</label>
        <select id="gender" required>
            <option value="" disabled selected>请选择</option>
            <option value="M">男</option>
            <option value="F">女</option>
        </select>

        <label for="age">年龄：</label>
        <input type="number" id="age" min="0" max="130" required>

        <label for="email">邮箱：</label>
        <input type="email" id="email" required>

        <div class="button-container">
            <button type="submit" id="registerButton">注册</button>
        </div>
    </form>
</div>
  <script>
    document.getElementById('registerForm').addEventListener('submit', async (e) => {
      e.preventDefault();
      const username = document.getElementById('username').value.trim();
      const password = document.getElementById('password').value.trim();
      const gender = document.getElementById('gender').value;
      const age = document.getElementById('age').value.trim();
      const email = document.getElementById('email').value.trim();
      if (!username || !password) {
        alert('用户名和密码不能为空！');
        return;
      }
      if (username.length > 20) {
        alert('用户名长度不能超过 20 个字符！');
        return;
      }
      if (password.length < 6 || password.length > 20) {
        alert('密码长度在6-20 个字符之间！');
        return;
      }
      if (!gender || !gender.length) {
        alert('请选择您的性别！');
        return;
      }
      if (!age) {
        alert('请输入年龄！');
        return;
      }
      // 邮箱格式校验，HTML5的email类型已经提供了基本的格式验证，但我们可以保持此检查以确保兼容性
      const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
      if (!email || !emailPattern.test(email)) {
        alert('请输入有效的邮箱地址！');
        return;
      }
      
      
      const response = await fetch('/register', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password, gender, age, email })
      });
      const result = await response.json();
      if (result.success && result.redirectUrl) {
        window.location.href = result.redirectUrl + '?timestamp=' + Date.now();
      } else {
        alert(result.message);
      }
    });
  </script>
</body>
</html>